# 欢迎使用MDX渲染器 🎉

这是一个**React MDX渲染器**的演示，支持实时编译和渲染MDX内容。

## 功能特性

- ✅ 支持标准Markdown语法
- ✅ 支持GitHub风格扩展语法 (GFM)
- ✅ 代码语法高亮
- ✅ 自定义组件样式
- ✅ 实时编译和预览

## 代码示例

```javascript
function HelloWorld() {
  return <h1>Hello, MDX!</h1>;
}

// 使用箭头函数
const Greeting = ({ name }) => {
  return <p>Hello, {name}!</p>;
};
```

```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# 计算斐波那契数列
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")
```

## 表格支持

| 功能 | 状态 | 描述 |
|------|------|------|
| Markdown | ✅ | 基础语法支持 |
| 代码高亮 | ✅ | 语法高亮显示 |
| 表格 | ✅ | GitHub风格表格 |
| 任务列表 | ✅ | 待办事项列表 |
| 数学公式 | 🔄 | 计划支持 |

## 任务列表

- [x] 实现基础MDX渲染
- [x] 添加代码高亮
- [x] 支持表格语法
- [x] 支持任务列表
- [ ] 添加数学公式支持
- [ ] 添加更多自定义组件

## 引用

> 这是一个引用块的示例。MDX让我们可以在Markdown中使用React组件，非常强大！
> 
> 你可以在MDX中嵌入任何React组件，这为文档编写提供了无限可能。

## 链接和图片

访问 [MDX官网](https://mdxjs.com/) 了解更多信息。

你也可以查看 [React官方文档](https://react.dev/) 学习React。

## 列表示例

### 无序列表
- 第一项
- 第二项
  - 嵌套项目 1
  - 嵌套项目 2
- 第三项

### 有序列表
1. 首先做这个
2. 然后做那个
3. 最后完成这个
   1. 子步骤 A
   2. 子步骤 B

## 强调和格式

这是**粗体文本**，这是*斜体文本*，这是***粗斜体文本***。

你也可以使用`内联代码`来突出显示代码片段。

~~删除线文本~~也是支持的。

---

## 自定义React组件演示

下面展示了如何在MDX中使用自定义的React组件，这些组件使用了Antd UI库：

### 交互式计数器

<InteractiveCounter />

### 用户信息卡片

<UserCard name="张三" role="前端开发工程师" />

<UserCard name="李四" role="后端开发工程师" />

### 进度条演示

<ProgressDemo />

### 通知演示

<NotificationDemo />

### 项目时间线

<TimelineDemo />

### 数据统计

<StatisticsDemo />

### 输入演示

<InputDemo />

### 徽章演示

<BadgeDemo />

---

**提示**: 这个MDX内容是从文件中导入的，展示了如何使用Vite的`?raw`导入功能来加载MDX源内容并进行渲染。同时演示了如何在MDX中使用自定义的React组件。